<template>
  <vab-card class="page-main" shadow="hover">
    <template #header>
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          <vab-icon icon="pie-chart-line" />
          {{ queryMode == 'age' ? '年龄段' : '地区' }}人员信息统计
        </div>
        <div style="flex: 1"></div>
        <div>
          <el-radio-group v-model="queryMode" @change="changeRadio">
            <el-radio :disabled="loading" label="age">按年龄</el-radio>
            <el-radio :disabled="loading" label="pos">按地区</el-radio>
          </el-radio-group>
        </div>
      </div>
    </template>
    <div v-loading="loading" class="echarts-box">
      <div id="myEcharts-2" :style="{ width: '100%', height: '200px' }"></div>
    </div>
  </vab-card>
</template>

<script>
  import {
    defineComponent,
    onMounted,
    onUnmounted,
    reactive,
    toRefs,
  } from 'vue'
  import * as echarts from 'echarts'
  import { doStatisticsForEmpPos } from '@/api/publicAuth'
  import { doStatisticsForEmpAge } from '@/api/publicAuth'
  export default defineComponent({
    name: 'CirclePosition',
    components: {},
    setup() {
      const state = reactive({
        legendData: [],
        seriesData: [],
        empAllNum: 0,
        loading: true,
        queryMode: 'age',
      })
      // 声明定义一下echart
      let echart = echarts
      let options = {
        title: {
          text: '',
          subtext: '',
          left: 'left',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: [],
        },
        series: [
          {
            name: '地区',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      const getData = async () => {
        state.loading = true
        const {
          data: { provinceNames, details, empAllNum },
        } = await doStatisticsForEmpPos()
        state.legendData = provinceNames
        state.seriesData = details
        state.empAllNum = empAllNum
        //向options赋值
        options.title.text = '共计' + state.empAllNum + '人'
        options.legend.data = state.legendData
        options.series[0].data = state.seriesData
        initChart()
        state.loading = false
      }

      const getDataAge = async () => {
        state.loading = true
        const {
          data: { provinceNames, details, empAllNum },
        } = await doStatisticsForEmpAge()
        state.legendData = provinceNames
        state.seriesData = details
        state.empAllNum = empAllNum
        //向options赋值
        options.title.text = '共计' + state.empAllNum + '人'
        options.legend.data = state.legendData
        options.series[0].data = state.seriesData
        initChart()
        state.loading = false
      }

      const changeRadio = () => {
        if (state.queryMode == 'age') {
          getDataAge()
        } else {
          getData()
        }
      }

      onMounted(async () => {
        await getDataAge()
      })

      onUnmounted(() => {
        echart.dispose()
      })

      // 基础配置一下Echarts
      function initChart() {
        let chart = echart.init(document.getElementById('myEcharts-2'), 'light')
        // 把配置和数据放这里
        chart.setOption(options)
        window.onresize = function () {
          //自适应大小
          chart.resize()
        }
      }

      return { initChart, ...toRefs(state), getData, getDataAge, changeRadio }
    },
  })
</script>

<style>
  .page-main {
    width: 100%;
  }
  .el-card__header {
    height: 40px;
    padding: 4px 8px;
    line-height: 32px;
  }
</style>
